<template>
  <div>
    <best-bet :keywords="keywords"></best-bet>
    <loading v-if="result.length == 0"></loading>
    <every-music
      @play="play"
      :keywords="keywords"
      :songlist="result"
      :playMUsicID="playMUsicID"
      v-else
    ></every-music>
    <loading v-if="isloading"></loading>
    <div ref="bottomb" class="loadingmore" @click="getMore">
      {{ isMore ? "加载更多" : "已经到底了没有更多.." }}
    </div>
  </div>
</template>

<script>
import EveryMusic from "./EveryMusic.vue";
import BestBet from "./BestBet.vue";
import _ from "lodash";
export default {
  props: {
    keywords: String,
    playMUsicID:Number
  },
  data() {
    return {
      result: [],
      page: 1,
      limit: 20,
      isloading: false,
      isMore: true,
    };
  },
  created() {
    // this.axios
    //   .get(`/search?keywords=${this.keywords}&type=100`)
    //   .then((result) => {
    //     console.log("最佳匹配歌手==>", result);
    //   });
    this.getResult();
    window.addEventListener("scroll", this.windowScroll);
  },
  methods: {
    play(event) {
      this.$emit("play", event);
      this.$route.meta.hideNav=false;
    },
    async getResult() {
      let offset = (this.page - 1) * this.limit;
      await this.axios
        .get(
          `/cloudsearch?keywords=${this.keywords}&linmit=${this.limit}&offset=${offset}`
        )
        .then((result) => {
          if (result.songCount == 0) {
            this.isloading = false;
            this.isMore = false;
            return;
          }
          // console.log("最佳匹配歌手==>", result.data.result);
          let re = result.data.result.songs.map((v) => {
            v.song = {
              privilege: v.privilege,
              artists: v.ar,
              album: v.al,
            };
            return v;
          });
          this.result = this.result.concat(re);
          this.isloading = false;
          // console.log(this.result);
        });
    },
    getMore() {
      this.page++;
      this.getResult();
      this.isloading = true;
    },
    windowScroll: _.debounce(function () {
      if (window.innerHeight + window.scrollY > this.$refs.bottomb.offsetTop) {
        this.getMore();
      }
    }, 300),
  },
  components: { EveryMusic, BestBet },
};
</script>

<style lang="less" scoped>
.loadingmore {
  line-height: 50px;
  text-align: center;
  padding: 5px;
}
</style>